<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            /* This will be overridden by align-self */
            height: 200px;
            background-color: #f2f2f2;
        }

        .flex-item {
            /* margin: 10px; */
            padding: 20px;
            background-color: #66b3ff;
            color: white;
            text-align: center;
            border-radius: 5px;
        }

        /* Using align-self to override alignment for a specific item */
        .flex-item:nth-child(2) {
            align-self: flex-start;
            /* This item will start at the top */
        }

        .flex-item:nth-child(3) {
            align-self: flex-end;
            /* This item will end at the bottom */
        }
    </style>
</head>

<body>
    <p>align-self属性允许单个项目有与其他项目不一样的对齐方式，
        可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，
        如果父元素没有也没设置align-items属性，则等同于stretch。

    </p>
    <p>align-self: auto | flex-start | flex-end | center | baseline | stretch;</p>

    <p>
        该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

        align-self属性接受以下值：

        auto: 默认值，等同于父元素的align-items值。如果父元素没有设置align-items，则等同于stretch。

        flex-start: 子项目与容器的交叉轴起点对齐。

        flex-end: 子项目与容器的交叉轴终点对齐。

        center: 子项目在容器的交叉轴上居中对齐。

        baseline: 子项目按照它们的基线对齐。

        stretch:（默认值，如果align-items或align-self设置为auto）子项目将沿交叉轴方向拉伸以填满整个容器。

    </p>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>

</html>